<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root"></div>


  <script crossorigin src="https://unpkg.com/react@18.3.1/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"></script>
  <script crossorigin src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>

  <script type="text/babel">

    class App extends React.Component {
      constructor() {
        super()
        this.state = {
          title: '我是标题',
          url: 'https://zh-hans.react.dev/images/home/videos/rethinking.jpg',
          link: 'https://www.baidu.com',
          style: {
            color: 'red'
          },
          isActive: true
        }
      }

      render() {
        const { title, url, link, style, isActive } = this.state

        const classList = ['abc', 'efg', isActive ? 'active' : '']
        return (
          <div>
            {/* 绑定基本属性 */}
            {/* 绑定title */}
            <h2 title={title}>二级标题</h2>
            {/* 绑定src */}
            <img src={url} alt=""/>
            {/* 绑定href */}
            <a href={link}>去百度</a>

            {/* 动态绑定class */}
            <p className="abc ded">class绑定</p>
            <p className={`abc ded ${isActive ? 'active' : ''}`}>class绑定</p>
            <p className={classList.join(' ')}>class绑定</p>
            
            {/* 动态绑定内联样式 */}
            <p style={{ color: 'red' }}>内联样式</p>
            <p style={style}>内联样式</p>
          </div>
        )
      }

    }
    
    const root = ReactDOM.createRoot(document.querySelector('#root'))
    root.render(<App/>)
  </script>
</body>
</html>